<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>睿途题库 - 登录</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <link href="css/common.css" rel="stylesheet">
    <link href="css/auth.css" rel="stylesheet">
    
    <!-- Tailwind 配置 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#165DFF',
                        secondary: '#4080FF',
                        accent: '#00B42A',
                        dark: '#1D2129',
                        light: '#F2F3F5',
                        muted: '#86909C'
                    },
                    fontFamily: {
                        inter: ['Inter', 'system-ui', 'sans-serif'],
                    },
                    boxShadow: {
                        'card': '0 10px 30px -5px rgba(0, 0, 0, 0.1)',
                    }
                },
            }
        };
    </script>
    

</head>
<body class="font-inter bg-gray-50 min-h-screen flex items-center justify-center education-bg">
    <!-- 背景装饰元素 -->
    <div class="absolute inset-0 overflow-hidden -z-10">
        <div class="absolute top-10 left-10 w-40 h-40 rounded-full bg-primary/10 animate-float">
            <div class="w-full h-full flex items-center justify-center text-primary/20 text-6xl">
                <i class="fa fa-book"></i>
            </div>
        </div>
        <div class="absolute bottom-20 right-20 w-60 h-60 rounded-full bg-secondary/10 animate-float" style="animation-delay: -2s">
            <div class="w-full h-full flex items-center justify-center text-secondary/20 text-7xl">
                <i class="fa fa-graduation-cap"></i>
            </div>
        </div>
        <div class="absolute top-1/3 right-1/4 w-32 h-32 rounded-full bg-accent/10 animate-float" style="animation-delay: -4s">
            <div class="w-full h-full flex items-center justify-center text-accent/20 text-5xl">
                <i class="fa fa-lightbulb-o"></i>
            </div>
        </div>
    </div>

    <!-- 登录卡片 -->
    <div class="w-full max-w-md px-6 py-8 bg-white rounded-2xl shadow-card relative overflow-hidden">
        <!-- 顶部装饰条 -->
        <div class="absolute top-0 left-0 right-0 h-1 bg-gradient-to-r from-primary to-accent"></div>
        
        <!-- 标题区域 -->
        <div class="text-center mb-8">
            <h1 class="text-[clamp(1.5rem,3vw,2rem)] font-bold text-dark">睿途题库登录</h1>
            <p class="text-muted mt-2">欢迎回来，请登录您的账号</p>
        </div>
        
        <!-- 登录选项卡 -->
        <div class="flex border-b mb-6">
            <button id="tab-account" class="tab-button tab-active flex-1">
                <i class="fa fa-user-circle mr-1"></i> 用户名/邮箱
            </button>
            <button id="tab-phone" class="tab-button tab-inactive flex-1">
                <i class="fa fa-mobile-phone mr-1"></i> 手机号
            </button>
        </div>
        
        <!-- 登录表单 -->
        <form id="loginForm" class="space-y-5">
            <!-- 用户名/邮箱登录表单 -->
            <div id="form-account" class="space-y-5">
                <!-- 用户名/邮箱 -->
                <div class="space-y-2">
                    <label for="email" class="block text-sm font-medium text-dark">用户名/邮箱</label>
                    <div class="relative">
                        <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-muted">
                            <i class="fa fa-user"></i>
                        </span>
                        <input type="text" id="email" name="email" 
                               class="w-full pl-10 pr-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary/30 focus:border-primary transition-all duration-200 outline-none"
                               placeholder="请输入用户名或邮箱">
                    </div>
                </div>
                
                <!-- 密码 -->
                <div class="space-y-2">
                    <label for="password" class="block text-sm font-medium text-dark">密码</label>
                    <div class="relative">
                        <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-muted">
                            <i class="fa fa-lock"></i>
                        </span>
                        <input type="password" id="password" name="password" 
                               class="w-full pl-10 pr-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary/30 focus:border-primary transition-all duration-200 outline-none"
                               placeholder="请输入密码">
                        <button type="button" id="togglePassword" class="absolute inset-y-0 right-0 flex items-center pr-3 text-muted hover:text-primary transition-colors">
                            <i class="fa fa-eye-slash"></i>
                        </button>
                    </div>
                </div>
                
                <!-- 验证码 -->
                <div class="space-y-2">
                    <label for="captcha" class="block text-sm font-medium text-dark">验证码</label>
                    <div class="flex space-x-3">
                        <div class="relative flex-1">
                            <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-muted">
                                <i class="fa fa-shield"></i>
                            </span>
                            <input type="text" id="captcha" name="captcha" 
                                   class="w-full pl-10 pr-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary/30 focus:border-primary transition-all duration-200 outline-none"
                                   placeholder="请输入验证码">
                        </div>
                        <div class="flex items-center">
                            <div id="captchaImage" class="w-36 h-12 bg-gray-100 rounded-lg flex items-center justify-center text-dark font-bold tracking-wider select-none">
                                <!-- Captcha will be generated by JavaScript -->
                            </div>
                            <button type="button" id="refreshCaptcha" class="ml-2 text-muted hover:text-primary transition-colors captcha-refresh">
                                <i class="fa fa-refresh"></i>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 手机号登录表单 -->
            <div id="form-phone" class="space-y-5 hidden">
                <!-- 手机号 -->
                <div class="space-y-2">
                    <label for="phone" class="block text-sm font-medium text-dark">手机号</label>
                    <div class="relative">
                        <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-muted">
                            <i class="fa fa-mobile-phone"></i>
                        </span>
                        <input type="tel" id="phone" name="phone" 
                               class="w-full pl-10 pr-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary/30 focus:border-primary transition-all duration-200 outline-none"
                               placeholder="请输入手机号">
                    </div>
                </div>
                
                <!-- 短信验证码 -->
                <div class="space-y-2">
                    <label for="smsCode" class="block text-sm font-medium text-dark">短信验证码</label>
                    <div class="flex space-x-3">
                        <div class="relative flex-1">
                            <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-muted">
                                <i class="fa fa-envelope-o"></i>
                            </span>
                            <input type="text" id="smsCode" name="smsCode" 
                                   class="w-full pl-10 pr-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary/30 focus:border-primary transition-all duration-200 outline-none"
                                   placeholder="请输入验证码">
                        </div>
                        <button type="button" id="sendSmsCode" class="min-w-[120px] py-3 px-4 bg-primary/10 text-primary font-medium rounded-lg hover:bg-primary/20 transition-colors whitespace-nowrap">
                            获取验证码
                        </button>
                    </div>
                </div>
            </div>
            
            <!-- 登录按钮 -->
            <button type="submit" class="w-full py-3 bg-primary hover:bg-primary/90 text-white font-medium rounded-lg transition-all duration-200 transform hover:-translate-y-1 hover:shadow-lg flex items-center justify-center">
                <span>登录</span>
                <i class="fa fa-arrow-right ml-2"></i>
            </button>
            
            <!-- 其他选项 -->
            <div class="flex justify-between items-center text-sm">
                <a href="changePassword.html" class="text-muted hover:text-primary transition-colors">忘记密码？</a>
                <a href="register.html" class="text-primary hover:underline">注册新用户</a>
            </div>
            
            <!-- 第三方登录（隐藏状态） -->
            <div id="thirdPartyLogin" class="mt-6 pt-6 border-t border-gray-100 hidden">
                <p class="text-center text-muted mb-4">或使用以下方式登录</p>
                <div class="flex justify-center space-x-4">
                    <button type="button" class="w-10 h-10 rounded-full bg-[#07C160]/10 text-[#07C160] flex items-center justify-center hover:bg-[#07C160]/20 transition-colors">
                        <i class="fa fa-weixin"></i>
                    </button>
                    <button type="button" class="w-10 h-10 rounded-full bg-[#1DA1F2]/10 text-[#1DA1F2] flex items-center justify-center hover:bg-[#1DA1F2]/20 transition-colors">
                        <i class="fa fa-twitter"></i>
                    </button>
                    <button type="button" class="w-10 h-10 rounded-full bg-[#4267B2]/10 text-[#4267B2] flex items-center justify-center hover:bg-[#4267B2]/20 transition-colors">
                        <i class="fa fa-facebook"></i>
                    </button>
                </div>
            </div>
            
            <!-- 显示第三方登录按钮 -->
            <div class="mt-6 text-center">
                <button type="button" id="showThirdParty" class="text-muted hover:text-primary text-sm flex items-center justify-center mx-auto transition-colors">
                    <span>其他登录方式</span>
                    <i class="fa fa-angle-down ml-1"></i>
                </button>
            </div>
        </form>
    </div>

    <!-- 页脚 -->
    <div class="absolute bottom-6 text-center text-sm text-muted">
        <p>© 2023 睿途题库. 保留所有权利.</p>
    </div>

    <!-- JavaScript -->
    <script>
        // Wait for DOM to be fully loaded
        document.addEventListener('DOMContentLoaded', function() {
            // Toggle password visibility
            const togglePassword = document.getElementById('togglePassword');
            const passwordInput = document.getElementById('password');
            
            if (togglePassword && passwordInput) {
                togglePassword.addEventListener('click', function() {
                    const type = passwordInput.getAttribute('type') === 'password' ? 'text' : 'password';
                    passwordInput.setAttribute('type', type);
                    
                    // Toggle icon
                    this.querySelector('i').classList.toggle('fa-eye');
                    this.querySelector('i').classList.toggle('fa-eye-slash');
                });
            }
            
            // Generate captcha function
            function generateCaptcha() {
                const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789';
                let captcha = '';
                for (let i = 0; i < 4; i++) {
                    captcha += chars.charAt(Math.floor(Math.random() * chars.length));
                }
                return captcha;
            }
            
            // Initial captcha generation
            const captchaImage = document.getElementById('captchaImage');
            if (captchaImage) {
                captchaImage.textContent = generateCaptcha();
            }
            
            // Refresh captcha functionality
            const refreshCaptcha = document.getElementById('refreshCaptcha');
            
            if (refreshCaptcha && captchaImage) {
                refreshCaptcha.addEventListener('click', function() {
                    captchaImage.textContent = generateCaptcha();
                });
            }
            
            // Show/hide third-party login options
            const showThirdParty = document.getElementById('showThirdParty');
            const thirdPartyLogin = document.getElementById('thirdPartyLogin');
            
            if (showThirdParty && thirdPartyLogin) {
                showThirdParty.addEventListener('click', function() {
                    thirdPartyLogin.classList.toggle('hidden');
                    
                    // Toggle icon
                    const icon = this.querySelector('i');
                    if (thirdPartyLogin.classList.contains('hidden')) {
                        icon.classList.remove('fa-angle-up');
                        icon.classList.add('fa-angle-down');
                        this.querySelector('span').textContent = '其他登录方式';
                    } else {
                        icon.classList.remove('fa-angle-down');
                        icon.classList.add('fa-angle-up');
                        this.querySelector('span').textContent = '收起';
                    }
                });
            }
            
            // Tab切换功能
            const tabAccount = document.getElementById('tab-account');
            const tabPhone = document.getElementById('tab-phone');
            const formAccount = document.getElementById('form-account');
            const formPhone = document.getElementById('form-phone');
            
            if (tabAccount && tabPhone && formAccount && formPhone) {
                tabAccount.addEventListener('click', function() {
                    // 切换标签样式
                    tabAccount.classList.remove('tab-inactive');
                    tabAccount.classList.add('tab-active');
                    tabPhone.classList.remove('tab-active');
                    tabPhone.classList.add('tab-inactive');
                    
                    // 显示用户名/邮箱表单，隐藏手机号表单
                    formAccount.classList.remove('hidden');
                    formPhone.classList.add('hidden');
                });
                
                tabPhone.addEventListener('click', function() {
                    // 切换标签样式
                    tabPhone.classList.remove('tab-inactive');
                    tabPhone.classList.add('tab-active');
                    tabAccount.classList.remove('tab-active');
                    tabAccount.classList.add('tab-inactive');
                    
                    // 隐藏用户名/邮箱表单，显示手机号表单
                    formAccount.classList.add('hidden');
                    formPhone.classList.remove('hidden');
                });
            }
            
            // 发送短信验证码
            const sendSmsCodeBtn = document.getElementById('sendSmsCode');
            let countdown = 60;
            
            if (sendSmsCodeBtn) {
                sendSmsCodeBtn.addEventListener('click', function() {
                    const phoneInput = document.getElementById('phone');
                    const phone = phoneInput.value.trim();
                    
                    // 简单验证手机号格式
                    if (!phone || !/^1[3-9]\d{9}$/.test(phone)) {
                        alert('请输入正确的手机号');
                        return;
                    }
                    
                    // 开始倒计时
                    this.disabled = true;
                    this.textContent = `重新发送(${countdown}s)`;
                    this.classList.add('bg-gray-200', 'text-gray-500');
                    this.classList.remove('bg-primary/10', 'text-primary');
                    
                    const timer = setInterval(() => {
                        countdown--;
                        this.textContent = `重新发送(${countdown}s)`;
                        
                        if (countdown <= 0) {
                            clearInterval(timer);
                            this.disabled = false;
                            this.textContent = '获取验证码';
                            this.classList.remove('bg-gray-200', 'text-gray-500');
                            this.classList.add('bg-primary/10', 'text-primary');
                            countdown = 60;
                        }
                    }, 1000);
                    
                    // 模拟发送短信验证码
                    alert('验证码已发送，请注意查收');
                });
            }
            
            // Form submission handling
            const loginForm = document.getElementById('loginForm');
            
            if (loginForm) {
                loginForm.addEventListener('submit', function(e) {
                    e.preventDefault();
                    
                    // 判断当前激活的表单
                    const isAccountForm = !formAccount.classList.contains('hidden');
                    
                    if (isAccountForm) {
                        // 用户名/邮箱登录验证
                        const email = document.getElementById('email').value;
                        const password = document.getElementById('password').value;
                        const captcha = document.getElementById('captcha').value;
                        
                        // Simple validation
                        if (!email || !password || !captcha) {
                            alert('请填写所有字段');
                            return;
                        }
                        
                        // Validate captcha
                        if (captcha.toUpperCase() !== captchaImage.textContent.toUpperCase()) {
                            alert('验证码不正确');
                            return;
                        }
                        
                        // Mock successful login
                        alert('用户名/邮箱登录成功！正在跳转到首页...');
                    } else {
                        // 手机号登录验证
                        const phone = document.getElementById('phone').value;
                        const smsCode = document.getElementById('smsCode').value;
                        
                        // Simple validation
                        if (!phone || !smsCode) {
                            alert('请填写手机号和验证码');
                            return;
                        }
                        
                        // Validate phone format
                        if (!/^1[3-9]\d{9}$/.test(phone)) {
                            alert('请输入正确的手机号格式');
                            return;
                        }
                        
                        // Mock successful login
                        alert('手机号登录成功！正在跳转到首页...');
                    }
                    
                    // In a real project, this would include an AJAX request or page redirect
                    
                    // Reset form after successful login
                    loginForm.reset();
                    if (captchaImage) {
                        captchaImage.textContent = generateCaptcha();
                    }
                });
            }
        });
    </script>
</body>
</html>
